import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { VitePWA } from "vite-plugin-pwa";

import * as path from "path";
const pathResolve = (dir) => {
  return resolve(__dirname, ".", dir);
};
import AutoImport from "unplugin-auto-import/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      includeAssets: ["favicon.svg"],
      manifest: false,
      registerType: "autoUpdate",
      workbox: {
        runtimeCaching: [
          {
            urlPattern: /someInterface/i, // 接口缓存 此处填你想缓存的接口正则匹配
            handler: "CacheFirst",
            options: {
              cacheName: "interface-cache",
            },
          },
          {
            urlPattern: /(.*?)\.(js|css|ts)/, // js /css /ts静态资源缓存
            handler: "CacheFirst",
            options: {
              cacheName: "js-css-cache",
            },
          },
          {
            urlPattern: /(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/, // 图片缓存
            handler: "CacheFirst",
            options: {
              cacheName: "image-cache",
            },
          },
        ],
      },
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: true,
    }),
    // vue3自动引入
    AutoImport({
      imports: ["vue"],
      dts: "auto-imports.d.ts",
    }),
  ],
  resolve: {
    //设置别名
    alias: {
      "@": resolve(__dirname, "src"),
      "@comps": resolve(__dirname, "src/components"),
      "@api": resolve(__dirname, "src/api"),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        modifyVars: {
          hack: `true; @import (reference) "${pathResolve(
            "src/styles/index.scss"
          )}";`,
        },
        // 引入变量
        additionalData: `@use "@/styles/color/value.scss" as *;`,
        javascriptEnabled: true
      },
    },
  },
  server: {
    // host: "0.0.0.0",
    // port: 8888,
    // 是否开启 https
    // https: false,
    hot: true,
    proxy: {
      "/api": {
        target: "https://cnodejs.org/api/v1",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  build: {
    outDir: "lib",
    lib: {
      entry: resolve(__dirname, "./packages/index.js"), //指定组件编译入口文件
      name: "lw-ui",
      fileName: "lw-ui",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});
